<template>
	<view class="address-manage rf-row-wrapper">
		<view class="box">
			<view class="row b-b">
				<text class="tit">真实姓名</text>
				<input class="input" :disabled="isDis" type="text" v-model="auth.name.t" placeholder="请输入姓名"
					placeholder-class="placeholder" />
			</view>
			<view class="row " style="justify-content: center;font-weight: bold;color: #232323;">身份证(人像面)</view>
			<view class="row flex" style="height: auto;justify-content: center;">
				<view class="cell nocell " style="width:80%">
					<image :src="auth.back_img.t?auth.back_img.t:'/static/idcard-positive.png'"
						@click="uploadImage('auth','back_img')" style="width: 100%;height:300rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="row" style="justify-content: center;font-weight: bold;color: #232323;">身份证(国徽面)</view>
			<view class="row flex" style="height: auto;justify-content: center;">
				<view class="cell nocell" style="width:80%">
					<image :src="auth.front_img.t?auth.front_img.t:'/static/idcard-negative.png'"
						@click="uploadImage('auth','front_img')" style="width: 100%;height:300rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="row " style="font-weight: bold;color: #232323;">上传须知</view>
			<view class="notice">
				<view class="" style="width: 20%;">
					<view class="">
						<image style="width: 100%;" src="@/static/idcard1.png" mode="widthFix"></image>
					</view>
					<text>标准</text>
				</view>
				<view class="" style="width: 20%;">
					<view class="">
						<image style="width: 100%;" src="@/static/idcard2.png" mode="widthFix"></image>
					</view>
					<text>缺失</text>
				</view>
				<view class="" style="width: 20%;">
					<view class="">
						<image style="width: 100%;" src="@/static/idcard3.png" mode="widthFix"></image>
					</view>
					<text>模糊</text>
				</view>
				<view class="" style="width: 20%;">
					<view class="">
						<image style="width: 100%;" src="@/static/idcard4.png" mode="widthFix"></image>
					</view>
					<text>过曝</text>
				</view>
			</view>

			<view class="row b-b">
				<text class="tit">身份证号</text>
				<input class="input" :disabled="isDis" type="text" maxlength="18" v-model="auth.card.t"
					placeholder="请输入身份证号" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">手机号</text>
				<input class="input" :disabled="isDis" type="text" v-model="auth.mobile.t" placeholder="请输入登录手机号"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">收款方式</text>
				<view class="">
					银行卡
				</view>
				<!-- <u-radio-group v-model="radiovalue1" placement="row" @change="changeGroup" :disabled="isDis">
					<u-radio :customStyle="{margin: '10rpx'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.value">
					</u-radio>
				</u-radio-group> -->
			</view>

			<view class="">
				<view class="row b-b">
					<text class="tit">银行卡号</text>
					<input class="input" :disabled="isDis" type="text" v-model="auth.bank_code.t" placeholder="请输入银行卡号"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">开户银行</text>
					<input class="input" :disabled="isDis" type="text" v-model="auth.bank_name.t" placeholder="请输入开户银行"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">开户支行</text>
					<input class="input" :disabled="isDis" type="text" v-model="auth.bank_address.t"
						placeholder="请输入开户支行" placeholder-class="placeholder" style="width: 100%;flex: 1;" />
				</view>
			</view>

			<view v-if="!isDis" style="width: 90%;margin: 60rpx auto;">
				<!-- <view class="agreement">
					<checkbox style="transform:scale(0.6)" @click="isCh=!isCh" :checked="isCh" />
					<text style="color: #606266;">我已阅读并同意
						<text @click="$fun.jump('/pageA/webView/webView?url=http://auth.prod.zlbzb.cn/protocols.html')"
							style="color: #FE555A;">提现协议</text>
					</text>
				</view> -->
				<u-button type="primary" :text="'提交'" @tap="confirm"></u-button>
			</view>
			<view style="height: 30rpx;"></view>
		</view>
		<u-modal :show="show" title="请输入验证码" content='content' @confirm="confirmCode">
			<view class="">
				<view class="" style="text-align: center;">
					验证码已发送短信至
					{{auth.mobile.t?auth.mobile.t.replace(/(\d{3})\d{4}(\d{1})/, '$1****$2'):''}}
				</view>
				<view class="row b-b">
					<u-code-input v-model="code"></u-code-input>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
	/**
	 * @des 用户账户中心
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-01-10 15:17
	 * @copyright 2019
	 */
	// import {
	// 	memberInfo,
	// 	memberUpdate,
	// 	uploadImage
	// } from '@/api/userInfo';
	export default {
		data() {
			return {
				loading: false,
				curType: '',
				name: '',
				phone: '',
				image: '', //充值图片
				id: '',
				isDis: false,
				auth: {
					name: {
						t: '',
						p: '请输入真实姓名',
						status: 3
					}, // 真实姓名
					card: {
						t: '',
						p: '请输入身份证号',
						status: 3
					}, //身份证号
					front_img: {
						t: '',
						p: '请上传身份证国徽面',
						status: 3
					},
					back_img: {
						t: '',
						p: '请上传身份证人像面',
						status: 3
					},
					mobile: {
						t: '',
						p: '请输入登录手机号',
						status: 3
					}, // 银行卡号
					bank_code: {
						t: '',
						p: '请输入银行卡号',
						status: 3
					}, // 银行卡号
					bank_name: {
						t: '',
						p: '请输入开户行',
						status: 1
					}, // 银行卡号
					bank_address: {
						t: '',
						p: '请输入开户支行',
						status: 1
					}, // 银行卡号
				},
				radiovalue1: 3,
				radiolist1: [{
					name: '银行卡',
					disabled: false,
					value: 1
				}],
				isCh: false,
				code: '',
				show: false,
				isShow: false,
			};
		},
		async onLoad(options) {
			// const response = await this.$fun.ajax.post('index/passSet', {})
			// this.isShow = response.data
			// const res = await this.$fun.ajax.post('Xygwithdraw/isVerify', {})
			// if (res.code == 1) {
			// 	this.isDis = true
			// }
			this.getRealNameVerify()
		},
		methods: {
			async getRealNameVerify() {
				const res = await this.$fun.ajax.post('user/realNameVerify', {})
				if (res.data) {
					this.auth.name.t = res.data.name
					this.auth.card.t = res.data.card
					this.auth.front_img.t = res.data.front_img
					this.auth.back_img.t = res.data.back_img
					this.auth.mobile.t = res.data.mobile
					this.auth.bank_code.t = res.data.bank_code
					this.auth.bank_address.t = res.data.bank_address
					this.auth.bank_name.t = res.data.bank_name
				}

			},
			async confirmCode() {
				if (this.code.length < 6) return
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await this.$fun.ajax.post('withdraw/SubmitUserVerifyCode', {
					code: this.code
				})
				setTimeout(()=>{
					uni.hideLoading()
				},1200)
				if (res.code == 1) {
					this.$fun.jump('/pageA/wallet/withdrawal?id=2&name=余额', 2, 1000)
				}
			},
			changeGroup() {
				this.auth.bank_code.status = this.radiovalue1
				this.auth.bank_code.t = ''
				this.auth.bank_name.t = ''
				this.auth.bank_addr.t = ''
				this.auth.image.t = ''
			},
			checkePrice(item, index) {
				this.money = item;
				this.currentIndex = index
			},
			confirm() {
				// if (!this.isCh) return this.$fun.msg('请先阅读并同意用户协议和涉税代理委托书');
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const that = this
				let parms = {}
				for (var key in that.auth) {
					if (that.auth[key].t == '' && that.auth[key].status == this.radiovalue1) {
						if (!(key == 'bank_name' || key == 'bank_address')) {
							return that.$fun.msg(that.auth[key].p);
						}

					} else {
						parms[key] = that.auth[key].t
					}
				}
				that.$fun.ajax.post('user/realname', {
					...parms
				}).then(async res => {
					if (res.code === 1) {
						that.$fun.msg(res.msg);
						this.isDis = true
						uni.hideLoading()
						// that.show = true
					}
				}).catch(() => {
					uni.hideLoading()
				});
			},
			// 上传头像
			uploadImage(str1, str2) {
				if (this.isDis) {
					return
				}
				// 从相册选择图片
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.handleUploadFile(res.tempFilePaths, str1, str2);
					}
				});
			},
			// 上传头像
			handleUploadFile(data, str1, str2) {
				const _this = this;
				const filePath = data.path || data[0];
				_this.$fun.uploadPic(filePath, 'file')
					.then(r => {
						_this[str1][str2].t = r.data.fullurl;
						console.log(_this.auth);
					});
			},
		}
	};
</script>
<style scoped lang="scss">
	page {
		background-color: #f5f9ff;
	}

	.conter {
		text-align: center;
		margin-top: 30rpx;
		padding-bottom: 47rpx;
	}

	.imgewm {
		width: 351rpx;
		height: 350rpx;
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.my-account {
		background-color: #FFFFFF;
		/*  #ifndef H5  */
		height: 100vh;
		/*  #endif  */
		padding: 32upx 20upx;
		width: 100%;

		.header {
			padding: 30upx;
			height: 200upx;
			display: flex;
			align-items: center;
			opacity: 0.9;
			border-radius: 20upx;
			color: rgba(255, 255, 255, 0.6);
			font-size: $font-sm;
			position: relative;

			.account {
				width: calc(100% - 60upx);
				display: flex;
				position: absolute;
				z-index: 2;
				justify-content: space-between;

				.assets {
					.money {
						color: #fff;
						font-size: $font-lg + 10upx;
						margin: 0;
					}
				}

				.recharge {
					font-size: $font-base;
					width: 150upx;
					height: 54upx;
					line-height: 54upx;
					border-radius: $font-base;
					background-color: #fff9f8;
					text-align: center;
					margin-top: 10upx;
				}
			}

			.cumulative {
				width: calc(100% - 240upx);
				position: absolute;
				bottom: 20upx;
				display: flex;
				justify-content: space-between;

				.money {
					color: #fff;
					font-size: $font-lg + 4upx;
					margin: 0;
				}
			}

			.header-bg {
				position: absolute;
				width: 100%;
				height: 320upx;
				z-index: 1;
				top: 0;

				image {
					width: 100%;
					height: 320upx;
				}
			}
		}

		.nav {
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.item {
				flex: 1;
				margin: 20upx;
				font-size: $font-base - 4upx;
				display: inline-block;
				text-align: center;
				color: #999;

				.iconfont {
					display: block;
					margin: 0 auto;
					font-size: $font-lg + 20upx;
				}
			}
		}

		.advert {
			display: flex;

			.item {
				flex: 1;
				border-radius: 24upx;
				padding: 10upx 0;
				margin: 20upx 10upx;
				display: flex;
				justify-content: space-between;

				.iconfont {
					font-size: $font-lg + 20upx;
					margin-right: 20upx;
				}

				.text {
					margin-left: 20upx;

					.name {
						font-size: $font-base;
						font-weight: bold;
						height: 40upx;
					}

					.desc {
						font-size: $font-sm - 2upx;
					}
				}
			}

			.on {
				background-color: #fff3f3;
			}
		}
	}

	/* 内容区 */
	.conter {
		.title {
			color: #666;
			margin-top: 50rpx;
			font-size: 30rpx;
		}

		.cent {
			margin-top: 25rpx;
			overflow: hidden;

			.list {
				width: 200rpx;
				height: 120rpx;
				border: 1rpx solid #e8e8e8;
				float: left;
				margin: 0 18rpx;
				margin-bottom: 45rpx;
				position: relative;
				text-align: center;
				line-height: 120rpx;
				border-radius: 15rpx;

				// &:nth-child(3n) {
				// 	margin-right: 0;
				// }

				input {
					height: 50rpx;
					margin-left: 10rpx;
					margin-top: 35rpx;
				}

				.van-cell {
					padding: 0;
					width: 180rpx;
				}

				image {
					width: 40rpx;
					height: 37rpx;
					position: absolute;
					bottom: 0;
					right: 0;
					display: none;
				}

				&.active {
					color: #dd1021;
					border: 1rpx solid #dd1021;

					image {
						display: block;
					}
				}
			}
		}
	}

	.top {
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;

		.left {
			margin-top: 40rpx;

			.title {
				font-size: 24rpx;
				color: #666;
			}

			.num {
				font-size: 48rpx;
				color: #000;
				margin-top: 30rpx;
				font-weight: bold;
			}

			.jyjl {
				font-size: 24rpx;
				color: #dd1021;
				margin-top: 50rpx;
			}
		}

		.rightimg {
			width: 233rpx;
			height: 240rpx;
			margin-right: 50rpx;
		}
	}

	.rf-row-wrapper {
		.box {
			background-color: #fff;
			margin: 30rpx;

			.notice {
				display: flex;
				justify-content: space-between;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #232323;
			}

			.placeholder {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.row {
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 16px;
			height: 60px;
			background: #fff;

			.tit {
				width: 160rpx;
			}
		}

		/* 协议 */
		.agreement {
			/* text-align: center; */
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;

			text {
				margin: 0 5rpx;
			}
		}
	}
</style>